import React,{useEffect , useState ,useMemo} from 'react'
//  是做组件性能优化的
import {NavBar,Toast} from "react-vant"
import routerConfig from '../router' // 把路由表拿到组件
// 考虑组件性能优化 ，组件性能优化有 useCallBack，useMemo
import {useParams,useLocation,useMatch} from "react-router-dom"
function Myheader() {
  //  有state发生改变页面就会重新渲染
  let [count,setCount] = useState(0)
  let [title, setTitle] = useState("历史记录")
  let location = useLocation()
  
  // 如果res没有传就默认走这个空数组
  // formatTitle 这个函数做了一件事情，把路由表配置拿到了组件
  // js 中 对象是按地址引用的不是按照值引用的，说页面重新渲染
  // useMemo的语法和useEffeact一样，useMemo(()=>{},[])
  // 减少不必须的函数重新声明 // 组件性能优化
 let mytit = useMemo(()=>{
    console.log("render");
    const formatTitle = (arr,res=[] ) => {
      return arr.reduce((def,val)=>{
          if (val.children) {
            formatTitle(val.children,def)
          } else {
            if (val.path === location.pathname) {
              def.push(val)
            }
          }
          return def
      },res)
  }
  const curParams =  formatTitle(routerConfig)
  const targetParmas = curParams[0]
  console.log(targetParmas,"333333")
  console.log(curParams,"444444");
  const mytit = targetParmas.tit || ""
  return mytit
  },[location.pathname]) // 只有依赖项发生改变的时候useMemo里的东西才会执行,当依赖项为空数组的时候像useEffect一样只执行一次

  // const formatTitle = (arr,res=[] ) => {
  //     return arr.reduce((def,val)=>{
  //         if (val.children) {
  //           formatTitle(val.children,def)
  //         } else {
  //           if (val.path === location.pathname) {
  //             def.push(val)
  //           }
  //         }
  //         return def
  //     },res)
  // }
  // const curParams =  formatTitle(routerConfig)
  // const targetParmas = curParams[0]
  // console.log(targetParmas,"333333")
  // console.log(curParams,"444444");
  // const mytit = targetParmas.tit
  // setTitle(targetParmas.tit)
   let [flag,setFlag] = useState(true)
//   let params = useParams()
 
  let Match = useMatch(location.pathname)
  console.log(Match);
//   console.log(params);

  // useEffect(()=>{
  //   // console.log(location.pathname);
  //   if (location.pathname === "/history") {
  //       setTitle("历史记录")
  //   } else if (location.pathname === "/weight") {
  //       setTitle("体重")
  //   } else if (location.pathname === "/line") {
  //       setTitle("近七天体重")
  //   }
  //   if (location.pathname === "/login" ) {
  //       setFlag(false)
  //   } else {
  //       setFlag(true)
  //   }
  // },[location.pathname])
  return (
    <div>
        {
            flag ? <NavBar
            title={mytit}
            leftText={count}
            rightText="按钮"
            onClickLeft={() =>setCount(count + 1)}
            onClickRight={() => Toast('按钮')}
        /> : null
        }
         
    </div>
  )
}

export default Myheader